<template>
  <div style="margin-top: 20px;">
    <div class="nycz-class">
      <div
        id="toWeekLine"
        style="width: 550px;height: 300px;margin-top: 0px;padding-top: 20px;"
      ></div>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" class="dataList">
      <swiper-slide
        id="appWidth"
        v-for="item in 5"
        :key="item"
        style="height: 59px;"
      >
        <div class="df aic jcsb ">
          <div class="item-box df aic">
            <div class="goodsitem">马铃薯</div>
            <div class="goodsvalue">40000亩</div>
          </div>
          <div class="item-box df aic">
            <div class="goodsitem">马铃薯</div>
            <div class="goodsvalue">40000亩</div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="dp-class">
      <img
        src="../../../assets/government/home/xia.png"
        style="width: 36px;height: 24px;position: absolute; top:12px ;left: 145px;"
      />
      <div class="dp-class-container df aic">
        <div
          class="dp-class-container-item df "
          v-for="(item, index) in itemListGoods"
          :key="index"
        >
          <div>
            <img
              :src="item.img"
              style="width: 110px;height: 118px;margin-right: 16px;"
            />
          </div>
          <div>
            <div
              style="font-size: 20px;color:#2DF3FF ;font-weight: bold;"
              class="mt10"
            >
              {{ item.title }}
            </div>
            <div class="mt11 fs16 fwb ">3000{{ item.unit }}</div>
            <div class="mt9 fs16 fwb ">1{{ item.sub }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemListGoods: [
        {
          title: "年种植",
          img: require("../../../assets/government/home/2-icon7.png"),
          sub: "批次",
          unit: "亩",
        },
        {
          title: "年采收",
          img: require("../../../assets/government/home/-icon8.png"),
          sub: "批",
          unit: "吨",
        },
        {
          title: "年加工",
          img: require("../../../assets/government/home/123.png"),
          sub: "批",
          unit: "吨",
        },
        {
          title: "年销售",
          img: require("../../../assets/government/home/icon10.png"),
          sub: "省区",
          unit: "吨",
        },
      ],
      swiperOption: {
        direction: "vertical",
        loop: true,
        freeMode: true,
        slidesPerView: "auto",
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
          clickable: true,
        },
      },
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      var trafficWay = [
        {
          name: "种植业",
          value: 20,
        },
        {
          name: "畜牧业",
          value: 10,
        },
        {
          name: "品种数",
          value: 30,
        },
        {
          name: "渔业",
          value: 40,
        },
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [70, 90],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#FEC87F",
                formatter: function(params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return params.name + percent + "%";
                  } else {
                    return "";
                  }
                },
              },
            },
          },
          data: data,
        },
      ];
      let myChart = this.$echarts.init(document.getElementById("toWeekLine"));
      myChart.setOption({
        color: color,
        title: {
          text: "50公顷",
          subtext: "总面积",
          subtextStyle: {
            fontSize: 18,
            color: "#FEC87F",
            fontWeight: "bold",
          },
          top: "45%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#FEC87F",
            fontSize: 22,
            fontWeight: "bold",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              // style: {
              //   image: img,
              //   width: 178,
              //   height: 178,
              // },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["火车", "飞机", "客车", "轮渡"],
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nycz-class {
  width: 551px;
  height: 309px;
  background-image: url(".././../../assets/government/home/1.png");
}
.dp-class {
  width: 551px;
  height: 310px;
  background-image: url(".././../../assets/government/home/2.png");
}
.dataList {
  width: 551px;
  flex-wrap: wrap;
  margin-top: 15px;
  height: 170px;
  margin-bottom: 20px;
  overflow: hidden;
  margin-left: 0;
}
.item-box {
  width: 263px;
  height: 59px;
  background-image: url(".././../../assets/government/home/3.png");
  padding: 0 6px;
  .goodsitem {
    width: 110px;
    height: 59px;
    line-height: 59px;
    color: #fec87f;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .goodsvalue {
    width: 140px;
    margin-left: 10px;
    height: 59px;
    line-height: 59px;
    color: #fec87f;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.dp-class {
  position: relative;
}
.dp-class-container {
  padding-left: 40px;
  padding-top: 72px;
  justify-content: space-around;
  flex-wrap: wrap;
  .dp-class-container-item {
    width: 50%;
  }
}
</style>
